<template>
  <div class="proProgress">
    <span class="proProgress-title">
      项目进度
      <img src="/static/img/large.png" title="全屏展示" class="full-btn" />
    </span>
    <div id="proProgress-contents"></div>
  </div>
</template>
<script>
import { elecSandTableApi } from "@/services/WorkCenter";
export default {
  data() {
    return {
      echartStyle: {},
      xAxis: [],
      yAxis: []
    };
  },
  methods: {
    //获取图表数据
    getEchartData() {
      elecSandTableApi
        .getproProgressData({
          params: {
            field: "cp_type"
          }
        })
        .then(res => {
          res.data.filter(item => {
            this.xAxis.push(item.nickname);
            this.yAxis.push(item.process);
          });
          console.log(res.data)
          this.initCharts();
        })
        .catch(error => {
          console.log(error);
        });
    },
    //初始化图表
    initCharts() {
      let Chart = this.$echarts.init(
        document.getElementById("proProgress-contents")
      );
      // 绘制图表
      Chart.resize();
      this.echartStyle = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function(params) {
            var showHtm = "";
            for (var i = 0; i < params.length; i++) {
              //x轴名称
              var name = params[i].name;
              //值
              var value = params[i].value;
              showHtm += name + ":" + value + "%";
            }
            return showHtm;
          }
        },
        grid: {
          left: "15%",
          bottom: "30%"
        },
        xAxis: [
          {
            type: "category",
            data: this.xAxis,
            axisLabel: {
              show: true,
              textStyle: {
                color: "white",
                fontSize: "6px"
              },
              formatter: function(params) {
                var newParamsName = ""; // 最终拼接成的字符串
                var paramsNameNumber = params.length; // 实际标签的个数
                var provideNumber = 3; // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ""; // 表示每一次截取的字符串
                    var start = p * provideNumber; // 开始截取的位置
                    var end = start + provideNumber; // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr; // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName;
              }
            }
          }
        ],
        yAxis: [
          {
            splitLine: {
              show: true,
              //  改变轴线颜色
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#1e495c"]
              }
            },
            type: "value",

            axisLabel: {
              formatter: "{value}%",
              textStyle: {
                color: "#fff",
                fontSize: this.fontSize
              }
            },
            minInterval: 20,
            max: 100,
            min: 0
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            data: this.yAxis,
            barMaxWidth: 40,
            itemStyle: {
              normal: {
                color: "#fdef1a", //圈圈的颜色
                //柱形图圆角，初始化效果
                barBorderRadius: [5, 5, 0, 0]
              }
            }
          }
        ]
      };
      Chart.setOption(this.echartStyle);
      window.addEventListener("resize", function() {
        Chart.resize();
      });
    }
  },
  mounted() {
    this.getEchartData();
  }
};
</script>
<style lang="scss" scoped>
.proProgress {
  .proProgress-title {
    color: #FFA201;
    font-size: 16px;
    padding-left: 3%;
    display: block;
    margin: 1vh 2% 0 2%;
    position: relative;
    .full-btn {
      position: absolute;
      right: 5px;
      top: 3px;
      cursor: pointer;
    }
  }
  #proProgress-contents {
    width: 100%;
    height: 88%;
    padding: 0 5px;
  }
}
</style>